<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>layPage demo</title>
    <meta name="keywords" content="分页插件,ajax分页,异步分页">
    <meta name="description" content="laypage是一款多功能的js分页组件，主要应用于前端页面Ajax普通分页以及信息流加载，并且可无缝迁移至Node.js平台。laypage不依赖于任何第三方库，直接拿来用即可，它的接口继承了layui系列组件的一贯简洁，极易上手。那么，从现在开始，将分页的任务交给laypage吧！">
    <link href="laypage/skin/laypage.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <ul id="biuuu_city_list">
    </ul>
    <div id="biuuu_city">
    </div>
    <script src="/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="laypage/laypage.js"></script>
    <script type="text/javascript">
        //测试数据
        var data = [
    '北京',
    '上海',
    '广州',
    '深圳',
    '杭州',
    '长沙',
    '合肥',
    '宁夏',
    '成都',
    '西安',
    '南昌',
    '上饶',
    '沈阳',
    '济南',
    '厦门',
    '福州',
    '九江',
    '宜春',
    '赣州',
    '宁波',
    '绍兴',
    '无锡',
    '苏州',
    '徐州',
    '东莞',
    '佛山',
    '中山',
    '成都',
    '武汉',
    '青岛',
    '天津',
    '重庆',
    '南京',
    '九江',
    '香港',
    '澳门',
    '台北'
];
        var nums = 1; //每页出现的数量
        var pages = 1;

        $(document).ready(function () {
            $.ajax({
                type: "Post",
                url: "",
                //记得加双引号  T_T   
                data: "{ 'key': 'haha', 'value': '哈哈！' }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    nums = data.d["pagesize"]; //每页出现的数量
                    pages = data.d["allpages"]; //总页数
                    //var pages = Math.ceil(data.length / nums); //得到总页数
                    //调用分页
                    laypage({
                        cont: 'biuuu_city',
                        pages: pages,
                        jump: function (obj) {
                            document.getElementById('biuuu_city_list').innerHTML = thisDate(obj.curr);
                        }
                    })
                    return;
                },
                error: function (err) {
                    alert(err + "err");
                }
            });
        });


        var thisDate = function (curr) {
            //此处只是演示，实际场景通常是返回已经当前页已经分组好的数据
            var str = '', last = curr * nums - 1;
            last = last >= data.length ? (data.length - 1) : last;
            for (var i = (curr * nums - nums); i <= last; i++) {
                str += '<li>' + data[i] + '</li>';
            }
            return str;
        };

      

      
    </script>
</body>
</html>